<template>
  <div v-title="'物业客户 - 世外生活运营平台'">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData" ></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle MkPropertyCustomer">

      <mk-search-component :formArr="formArr"  inputPlaceholder = "客户编号/客户名称/联系人/联系电话/社区名称" @startSearch="fun_call_search">
        <span slot="slot_1">
            <el-button type="primary" size="" class='floatRight btn-create' @click="dialogVisible_add = true">新增客户</el-button>
        </span>
        <div  slot="slot_2" class="search-result-amount textAlignRight">
          <el-button type="primary" size="" class='floatRight btn-create' @click="dialogVisible_add = true">新增客户</el-button>
        </div>
      </mk-search-component>


      <div class="primary_bg tabContainer"  v-loading="isLoading" element-loading-text="拼命加载中">
        <el-table :data="dataArr.elements"
                  @row-click="showDetail">
          <el-table-column prop="number" label="客户编号" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="customerName" label="客户名称" width="250" show-overflow-tooltip></el-table-column>
          <el-table-column prop="contact" label="联系人"></el-table-column>
          <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
          <el-table-column prop="communityName" label="社区名称"  width="250"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="city" label="所在城市" width="120"></el-table-column>
          <el-table-column prop="expireDate" label="有效日期" width="120"></el-table-column>
        </el-table>

        <el-pagination v-if='dataArr.elements.length>0'
                       :current-page="dataArr.page" :total="dataArr.totalAmount"
                       :page-size="dataArr.size" layout="total, prev, pager, next"
                       @current-change="loadData"></el-pagination>
      </div>


    <!--客户详情-->
    <mk-property-customer-detail :showDialog="dialogVisible_detail"
                              :currentCustomerId="currentCustomerId"
                              @closeDialog="closeDialog_detail"
                             ></mk-property-customer-detail>

    <!--新增-->
    <mk-add-property-customer :showDialog="dialogVisible_add" @closeDialog="closeDialog_add"></mk-add-property-customer>

  </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import MkPropertyCustomerDetail from'./MkPropertyCustomerDetail.vue'
  import MkAddPropertyCustomer from'./MkAddPropertyCustomer.vue'
  import customerService from '../../../services/customer'

  export default {
    name: 'MkPropertyCustomer',
    components: {
      MkBreadcrumb, MkPropertyCustomerDetail, MkAddPropertyCustomer
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      provinceAndCity(state){
        this.$set(this.formArr,0,{
          formLabel:'所在城市',
          searchName:'cityArr',
          dataType:'array',
          componentType:'Cascader',
          changeOnSelect:false,
          optionsArr:state.customer.provinceAndCity,
          defaultProps:{
            label:'name',
            value: 'id',
            children: 'city'
          }
        })
      }
    }),
    mounted: function () {
//        this.loadCities();
      this.$store.dispatch('loadProvinceAndCity').then(()=>{
        return this.provinceAndCity
      });
    },

    activated(){
      this.loadData(1);
    },

    methods :{
      fun_call_search(search,input) {
        this.searchCondition.cityId = search.cityId;
        this.searchCondition.sesarch = input;
        this.loadData(1);
      },
      loadData(page) {
        if(page) {
            this.searchCondition['page.pn'] = page;
        }
        this.isLoading = true;
        customerService.loadPropertyCustomerServer(this.searchCondition,data=>{
          this.dataArr = data.data;
          this.isLoading = false;
        })
      },
      loadCities() {

      },
      closeDialog_detail(type) {
          if(type) {
              this.loadData();
          }
          this.dialogVisible_detail = false;
      },
      showDetail (row) {
        this.currentCustomerId = row.id;
        this.dialogVisible_detail = true;
      },
      closeDialog_add(type) {
        if(type) {
            this.loadData();
        }
        this.dialogVisible_add = false;
      },
    },

    data () {
      return {
        formArr:[],
        dialogVisible_add: false,
        currentCustomerId: null,
        dialogVisible_detail:false,
        searchCondition: {
          cityId:　'',
          search: '',
          'page.pn': 1,
          'page.size': 10
        },
        isLoading: false,
        dataArr: {
          elements: [],
          page: '',
          size: '',
          totalAmount: ''
        },
        breadcrumbData: {
          list: [
            {
              name: '客户管理', path: null, clickAble: false
            },
             {
              name: '物业客户', path: null, clickAble: false
            },
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'customer-icon',
        }
      }
    }
  }
</script>

<style lang="less">
</style>
